<template>
  <v-tabs color="primary" dark grow>
    <v-tab ripple>
      Request
    </v-tab>
    <v-tab ripple>
      Response
    </v-tab>

    <v-tab-item class="display-3"><!-- 请求 -->
      <v-card>
        <v-card-text>
          <flipper>
            <div slot="face" class="accent--text">METHOD</div>
            <div slot="back" class="success--text">POST</div>
          </flipper>

          &ensp;

          <flipper>
            <div slot="face" class="accent--text">URL</div>
            <div slot="back" class="success--text">http://localhost:8080/login</div>
          </flipper>

          &ensp;

          <flipper>
            <div slot="face" class="accent--text">PROTOCOL/VERSION</div>
            <div slot="back" class="success--text">HTTP/1.1</div>
          </flipper>
          
          <br/>

          <flipper>
            <div slot="face" class="accent--text">HEADERS</div>
            <div slot="back" class="success--text">
              Content-Type: application/json; charset=utf-8<br/>
              Content-Length: 123456<br/>
              Origin: http://localhost:8080 
            </div>
          </flipper>

          <br/>
          <br/>

          <flipper>
            <div slot="face" class="accent--text">BODY</div>
            <div slot="back" class="success--text">
              {"username":"john-doe","password":"i don't know"}
            </div>
          </flipper>
        </v-card-text>
      </v-card>
    </v-tab-item><!-- /请求 -->

    <v-tab-item class="display-3"><!-- 响应 -->
      <v-card>
        <v-card-text>
          <flipper>
            <div slot="face" class="accent--text">PROTOCOL/VERSION</div>
            <div slot="back" class="success--text">HTTP/1.1</div>
          </flipper>

          &ensp;

          <flipper>
            <div slot="face" class="accent--text">STATUS_CODE</div>
            <div slot="back" class="success--text">200</div>
          </flipper>

          &ensp;

          <flipper>
            <div slot="face" class="accent--text">STATUS_TEXT</div>
            <div slot="back" class="success--text">OK</div>
          </flipper>
          
          <br/>

          <flipper>
            <div slot="face" class="accent--text">HEADERS</div>
            <div slot="back" class="success--text">
              Content-Type: application/json; charset=utf-8<br/>
              Content-Length: 123456
            </div>
          </flipper>

          <br/>
          <br/>

          <flipper>
            <div slot="face" class="accent--text">BODY</div>
            <div slot="back" class="success--text">
              {"user":{"id":1,"nickname":"John Doe"},"authentication_token":"dxewgvrdgvfdsgtr"}
            </div>
          </flipper>
        </v-card-text>
      </v-card>
    </v-tab-item><!-- /响应 -->
  </v-tabs>
</template>

<script>
import Flipper from '@/components/Flipper'

export default {
  components: { Flipper }
}
</script>

<style lang="scss" scoped>
div[slot] {
  font-size: 3rem;
}
</style>
